<template>
	<view>
		<view class="content">
			<view class="input-wrap">
				<text>姓名</text>
				<input class="input" type="text" v-model="info.name" placeholder="请输入姓名" />
			</view>
			<view class="input-wrap">
				<text>联系电话</text>
				<input class="input" type="number" maxlength="11" v-model="info.phone" placeholder="请输入" />
			</view>
			<view class="input-wrap">
				<view class="type">证件名称</view>
				<picker mode="selector" :range="info.IDNameArrayList" @change="handleChooseIDName">
					<view class="input level_align" >
						<input type="text" disabled v-model="info.IDName" placeholder="请选择" />
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="input-wrap">
				<text>证件号码</text>
				<input class="input" type="idcard" maxlength="18" v-model="info.ID" placeholder="请输入" />
			</view>
		</view>
		
		<view class="common-btn" @click="handleConfirmAddRider">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					name: '',
					phone: '',
					ID: '',
					id: '',
					IDName: '',
					IDNameArrayList: [], // 证件picker
					IDNameList: [], // 证件picker(详细信息)
				}
			};
		},
		onLoad(opt) {
			this.info.id = opt && opt.id
			if (this.info.id !== 'undefined' && this.info.id) {
				uni.setNavigationBarTitle({
					title: '编辑乘车人'
				})
				this.getRiderInfo()
			}
			this.getCardsType()
		},
		methods: {
			handleConfirmAddRider() {
				let {
					name,
					phone,
					IDName,
					ID
				} = this.info
				if (!name.trim()) return uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				})
				if (!this.$regexPhone.test(phone.trim())) return uni.showToast({
					title: '请输入联系电话',
					icon: 'none'
				})
				if (!ID.trim()) return uni.showToast({
					title: '请输入身份证号',
					icon: 'none'
				})
				let IDTypeId = 1
				this.info.IDNameList.forEach(item => {
					if (item.name == IDName) {
						IDTypeId = item.id
					}
				})
				// this.info.id = this.getRandomInt(1,99999)
				// this.$store.commit('upRiderList', this.info)
				let api = this.$api.addCommonRider
				if (this.info.id != 'undefined') {
					api = this.$api.addCommonRider + '?passengerId=' + this.info.id
				}
				this.$http.post(api, {
					passengerName: name,
					fareType: IDTypeId, // "证件类型（0护照，1身份证）"
					phone,
					certificateNumber: ID
				}).then(res => {
					if (res.code === 200) {
						uni.navigateBack({
							delta: 1
						});

						let arr_local = this.$store.getters.getRiderList
						let arr_net = []
						this.$http.get(this.$api.getCommonRiderList).then(res => { // 后台获取乘车人最新信息
							if (res.code === 200) {
								res.data.result.map(item => {
									item.ID = item.idNumber
									item.choosed = false
								})
								arr_net = res.data.result
								arr_local.forEach((it_l, in_l) => {
									arr_net.forEach((it_n, in_n) => {
										if (it_l.id === it_n.id) {
											this.$store.commit('upRiderList', it_n) // 更新本地乘车人信息
										}
									})
								})
							}
						})

					}
				})
			},
			// 选择证件类型
			selectType() {
				let _this = this
				uni.showActionSheet({
					itemList: this.info.IDNameArrayList,
					success: function(res) {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						_this.info.IDName = _this.info.IDNameArrayList[res.tapIndex]
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			handleChooseIDName(e) {
				const i = e.detail.value
				this.info.IDName = this.info.IDNameArrayList[i]
			},
			// 乘客证件类型选择
			getCardsType() {
				this.$http.get(this.$api.getCardsType).then(res => {
					if (res.code === 200) {
						this.info.IDNameList = res.data
						res.data.forEach((item, i) => {
							this.info.IDNameArrayList[i] = item.name
							// console.log(this.info.IDNameArrayList);
						})
					}
				})
			},
			getRandomInt(min, max) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
			},
			getRiderInfo() {
				this.$http.get(this.$api.editCommonRider + '?passengerId=' + this.info.id).then(res => {
					if (res.code === 200) {
						let {
							passengerName,
							phone,
							certificateNumber
						} = res.data
						this.info.ID = certificateNumber
						this.info.phone = phone
						this.info.name = passengerName
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 690rpx;
		margin: 20rpx auto 80rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
		background-color: #fff;
		border-radius: 12rpx;

		.input-wrap {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #EBEBEB;
			font-size: 30rpx;
			height: 100rpx;
			align-items: center;

			&:last-child {
				border: none;
			}

			.input {
				text-align: right;
				flex: 1;
			}
		}
	}

	.common-btn {
		box-shadow: none;
		width: 580rpx;
	}
</style>
